<template>
  <div id="basic-layout">
    <a-layout>
      <a-layout-sider
        class="sider"
        width="200"
        breakpoint="md"
        collapsed-width="80"
        :trigger="null"
        v-model:collapsed="collapsed"
      >
        <SiderLogo />
        <SiderMenu />
      </a-layout-sider>
      <a-layout :style="{ marginLeft: collapsed ? '80px' : '200px' }">
        <a-layout-header
          class="header"
          :style="{
            position: 'fixed',
            top: '0',
            left: collapsed ? '80px' : '200px',
            right: '0',
            zIndex: 999,
            height: '64px',
          }"
        >
          <a-row :wrap="false">
            <a-col flex="auto">
              <menu-unfold-outlined
                v-if="collapsed"
                class="trigger"
                @click="toggleCollapsed"
              />
              <menu-fold-outlined
                v-else
                class="trigger"
                @click="toggleCollapsed"
              />
            </a-col>
            <a-col flex="80px">
              <UserStatus />
            </a-col>
          </a-row>
        </a-layout-header>
        <a-layout-content class="content" :style="{ marginTop: '64px' }"
          ><router-view></router-view
        ></a-layout-content>
        <a-layout-footer
          class="footer"
          :style="{
            position: 'fixed',
            bottom: '0',
            left: collapsed ? '80px' : '200px',
            right: '0',
            zIndex: 999,
          }"
          >Powered by wangon . 醫師佣金系統</a-layout-footer
        >
      </a-layout>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import SiderMenu from "@/components/SiderMenu.vue";
import SiderLogo from "@/components/SiderLogo.vue";
import UserStatus from "@/components/UserStatus.vue";
import { ref } from "vue";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";

const collapsed = ref<boolean>(false);

const toggleCollapsed = () => {
  collapsed.value = !collapsed.value;
};
</script>

<style scoped>
/* #basic-layout {
  background-color: #eff1f7;
} */

#basic-layout .sider {
  background-color: #fff;
  bottom: 0;
  float: none;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 100;
  transition: width 0.3s ease-in-out;
  /* 添加過渡效果 */
}

#basic-layout .header {
  background-color: #fff;
  padding: 0 5px;
}

#basic-layout .header .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#basic-layout .header .trigger:hover {
  color: #1890ff;
}

#basic-layout .content {
  padding: 24px;
  /* background: #eee; */
  margin-bottom: 18px;
}

#basic-layout .footer {
  background: transparent;
  /* background: #eee; */
  padding: 0.5rem 1rem;
  font-size: 90%;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
}
</style>
